<template>
  <div>
    <!-- 列表区域 -->
    <el-table class="tabel-style" :data="questionsChoiceList">
      <el-table-column
        prop="number"
        label="试题编号"
        width="120px"
      ></el-table-column>
      <el-table-column prop="subject" label="学科"></el-table-column>
      <el-table-column prop="catalog" label="目录"></el-table-column>
      <el-table-column label="题型">
        <template v-slot="{ row }">
          <span>
            {{ row.questionType | questionTypeFilter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="题干" width="280px">
        <template v-slot="{ row }">
          <span>
            {{ row.question | html2Text }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180px">
        <template v-slot="{ row }">
          <span>
            {{ row.addDate | parseTimeByString }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="难度">
        <template v-slot="{ row }">
          <span>
            {{ row.difficulty | difficultyFilter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="120px"
      ></el-table-column>
      <el-table-column label="审核状态">
        <template v-slot="{ row }">
          <span>
            {{ row.chkState | chkStateFilter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见"></el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="120px"
      ></el-table-column>
      <el-table-column label="发布状态">
        <template v-slot="{ row }">
          <span>
            {{ row.publishState | publishStateFilter }}
          </span>
        </template></el-table-column
      >
      <el-table-column label="操作" width="280" fixed="right">
        <template v-slot="{ row }">
          <el-button size="small" type="text" @click="quesViewClick(row.id)"
            >预览</el-button
          >
          <el-button
            size="small"
            type="text"
            :disabled="row.chkState !== 0"
            @click="chkClick(row.id)"
            >审核</el-button
          >
          <el-button
            size="small"
            type="text"
            :disabled="row.publishState === 1"
            @click="reviseClick(row.id)"
            >修改</el-button
          >
          <el-button
            size="small"
            type="text"
            v-if="row.publishState === 0"
            @click="upFn(row)"
            >上架</el-button
          >
          <el-button size="small" type="text" v-else @click="downFn(row)"
            >下架</el-button
          >
          <el-button
            size="small"
            type="text"
            :disabled="row.publishState === 1"
            @click="delClick(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 题目预览框 -->
    <QuestionsView
      :showQuestionsView.sync="showQuestionsView"
      :questionItem="questionItem"
    ></QuestionsView>
    <!-- 题目审核框 -->
    <el-dialog
      :visible="showChkDialog"
      title="题目审核"
      width="400px"
      @close="closeChkDialog"
    >
      <el-form ref="chkFromRef" :model="chkFromData">
        <el-form-item>
          <el-radio-group v-model="chkFromData.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            placeholder="请输入审核意见"
            v-model="chkFromData.chkRemarks"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="btnCancel">取消</el-button>
            <el-button type="primary" @click="btnOk">确认</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  detail,
  choiceCheck,
  choicePublish,
  remove
} from '@/api/hmmm/questions.js'

import QuestionsView from '@/module-hmmm/components/questions-view'
export default {
  name: 'QuestionsChoiceTable',
  props: {
    questionsChoiceList: {
      type: Array
    }
  },
  components: {
    QuestionsView
  },
  data () {
    return {
      showQuestionsView: false, // 题目预览弹出层
      questionItem: {}, // 单个题目信息
      showChkDialog: false, // 题目审核框
      chkFromData: {
        chkState: 1,
        chkRemarks: ''
      }, // 题目审核框数据
      chkId: '' // 点击审核时的题目id
    }
  },
  methods: {
    getquestionsChoiceList () {
      this.$emit('getquestionsChoiceList')
    },
    // 预览功能
    async quesViewClick (quesId) {
      this.showQuestionsView = true
      const { data } = await detail({ id: quesId })
      this.questionItem = data
      console.log(data)
    },
    // 点击审核按钮
    chkClick (id) {
      this.showChkDialog = true
      this.chkId = id
    },
    // 关闭题目审核弹层
    closeChkDialog () {
      this.showChkDialog = false
    },
    // 题目审核弹层取消按钮
    btnCancel () {
      this.closeChkDialog()
    },
    // 题目审核弹层确认按钮
    async btnOk () {
      if (!this.chkFromData.chkRemarks) {
        return this.$message.warning('请输入审核意见')
      }
      try {
        await choiceCheck({ id: this.chkId, ...this.chkFromData })
        this.$message.success('操作成功')
        this.getquestionsChoiceList()
      } catch (e) {
        console.log(e)
      }
      this.closeChkDialog()
    },
    // 修改按钮
    reviseClick (id) {
      this.$router.push(`/questions/new?id=${id}`)
    },
    // 上架按钮
    upFn (row) {
      this.$confirm('您确定上架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choicePublish({
            ...row,
            publishState: 1
          })
          this.getquestionsChoiceList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 下架按钮
    downFn (row) {
      this.$confirm('您确定下架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choicePublish({
            ...row,
            publishState: 0
          })
          this.getquestionsChoiceList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 删除按钮
    delClick (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
          this.getquestionsChoiceList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style></style>
